<html>
<head>
  <title>AngularJS Views</title>
</head>
<body>
  <h1>Sample Application</h1>
  <div ng-app="mainApp">
    <p><a href="#addStudent">Add Student</a></p>
    <p><a href="#viewStudents">View Students</a></p>
    <div ng-view></div>
    
    <script type="text/ng-template" id="addStudent.htm">
      <h2> Add Student </h2>
      {{ message }}
    </script>
  </div>
  <script src="js/angular.min.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script>
  var mainApp = angular.module('mainApp', ['ngRoute']);
  
  mainApp.config(['$routeProvider', function($routeProvider){
    $routeProvider
    
    .when('/addStudent', {
      templateUrl: 'addStudent.htm', 
      controller: 'AddStudentController'
    })
    
    .when('/viewStudents', {
      templateUrl: 'views/viewStudents.htm',
      controller: 'ViewStudentsController'
    })
    
    .otherwise({
      redirectTo: '/addStudent'
    })
  }]);
  
  mainApp.controller('AddStudentController', function($scope){
    $scope.message = 'This page will be used to display add student form';
  })
  
  mainApp.controller('ViewStudentsController', function($scope){
    $scope.message = 'This page will be used to display all the students';
  });
  </script>
</body>
</html>